import React, { Component } from 'react';
import {
    StyleSheet,
    Modal,
    View,
    Text,
    Image,
    FlatList,
    TextInput,
    TouchableOpacity,
    SafeAreaView,
    DeviceEventEmitter,
} from 'react-native';
import { Formik } from 'formik';
import { RRCLoading, RRCToast } from 'react-native-overlayer';
import { getPixel, getScreenWidth, getScreenHeight } from '../common/common';
import HttpUtil from '../util/HttpUtil';
import BaseComponent from '../component/BaseComponent';
import Reason from '../component/Reason';
import Area from '../component/Area';
import Rack from '../component/Rack';
import BranchTree from '../component/BranchTree';
import UserTree from '../component/UserTree';
import DeviceInfo from 'react-native-device-info';
import InfraredModule from '../component/Infrared';
import { NavigationEvents } from 'react-navigation';

const data = [
    // { id:1, name:'IBMX3128服务器', rfid:'AC8231749888', state:'迁入', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' }, 
    // { id:2, name:'IBMX3128服务器', rfid:'AC8231749888', state:'在用', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' },   
    // { id:3, name:'IBMX3128服务器', rfid:'AC8231749888', state:'在用', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' },   
    // { id:4, name:'IBMX3128服务器', rfid:'AC8231749888', state:'在用', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' },   
    // { id:5, name:'IBMX3128服务器', rfid:'AC8231749888', state:'在用', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' },   
    // { id:6, name:'IBMX3128服务器', rfid:'AC8231749888', state:'在用', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' },   
    // { id:7, name:'IBMX3128服务器', rfid:'AC8231749888', state:'在用', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' },   
    // { id:8, name:'IBMX3128服务器', rfid:'AC8231749888', state:'在用', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' },   
    // { id:9, name:'IBMX3128服务器', rfid:'AC8231749888', state:'在用', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' },   
    // { id:10, name:'IBMX3128服务器', rfid:'AC8231749888', state:'在用', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' }, 
    // { id:11, name:'IBMX3128服务器', rfid:'AC8231749888', state:'迁入', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' }, 
    // { id:12, name:'IBMX3128服务器', rfid:'AC8231749888', state:'在用', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' },   
    // { id:13, name:'IBMX3128服务器', rfid:'AC8231749888', state:'在用', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' },   
    // { id:14, name:'IBMX3128服务器', rfid:'AC8231749888', state:'在用', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' },   
    // { id:15, name:'IBMX3128服务器', rfid:'AC8231749888', state:'在用', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' },   
    // { id:16, name:'IBMX3128服务器', rfid:'AC8231749888', state:'在用', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' },   
    // { id:17, name:'IBMX3128服务器', rfid:'AC8231749888', state:'在用', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' },   
    // { id:18, name:'IBMX3128服务器', rfid:'AC8231749888', state:'在用', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' },   
    // { id:19, name:'IBMX3128服务器', rfid:'AC8231749888', state:'在用', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' },   
    // { id:20, name:'11111111111111', rfid:'AC8231749888', state:'在用', owner: '刘云天', dept:'信息部', sn:'483758932', poistion:'A09机房', unit:'22', biz:'ERP', rack:'A30-1', cat:'服务器' },   
];
let that = {};
export default class AssetPay extends BaseComponent {

    constructor(props) {
        super(props);
        this.state = {
            showReasonModal: false,
            showAreaModal: false,
            showRackModal: false,
            showManageBranchModal: false,
            showManageUserModal: false,
            roomType: 0,
            dataCenterId: '',
            startU: '',
            reasonName: '',
            reasonId: '',
            areaId: '',
            areaName: '',
            assets: [],
            racks: [],
            cabinetList: [],
            branchList: [],
            rackId: '',
            rackName: '',
            manageBranchName: '',
            manageBranchId: '',
            manageUserName: '',
            manageUser: '',
            selectUserList: [],
            selected: [],
            selectedShow: [],
            modalVisible: false,

            statusName:'',
            assetName:'',
            assetNo:'',
            serialNo:'',
            rfidNo:'',
            usePersonId:'',
            usePersonNo:'',
            usePersonName:'',
            usePersonDeptName:'',
            usePersonPhone:'',
            useUserId:'',
            assetId:'',
            curItem:{},
            modalToastOpacity:0,
            modalToastMsg:'',
            modalToastShow:'none',
        }
        that = this;
        this.modalToastTimer=null;
    }

    componentDidMount() {

    }

    componentWillUnmount() {
        if (DeviceInfo.getDeviceId() === 'rk30sdk') {
            if (InfraredModule.getState() === 'init') {
                InfraredModule.destory();
                //console.log('释放了批量变更页的红外读头 状态:'+InfraredModule.getState());
            }

            if (this.infraredListener) {
                this.infraredListener.remove();
                //console.log('释放了批量变更页的红外监听');
            }
        }
    }

    onBackClicked = () => {
        this.props.navigation.navigate('Main');
        this.props.navigation.state.params.callBack();
        return true;
    }

    back = () => {
        this.props.navigation.navigate('Main');
        this.props.navigation.state.params.callBack();
    }

    renderItem(item) {
        return (
            <TouchableOpacity onPress={() => this.showUsePersonModal(item)}>
                <View key={item.assetId} style={styles.row}>
                    <View style={styles.rowLeft}>
                        <Text style={styles.name}>{item.assetName}</Text>
                        <Text style={styles.rfid}>RFID: {item.rfidNo}</Text>
                    </View>
                    <TouchableOpacity onPress={() => this.remove(item.assetId)}>
                        <View style={styles.rowRight}>
                            <Image source={require('../images/del.png')} style={{ resizeMode: 'contain', width: getPixel(25), height: getPixel(25) }} />
                        </View>
                    </TouchableOpacity>
                </View>
            </TouchableOpacity>
        )
    }

    personScan =()=>{
        that.setState({
            modalVisible :false
        })
        DeviceInfo.isCameraPresent()
            .then(isCameraPresent => {
                if ((isCameraPresent || Platform.OS == 'ios') && DeviceInfo.getDeviceId() !== 'rk30sdk') {
                    this.props.navigation.navigate('QBarCodeScan', {
                        isGoBack: true,
                        isHaveCamera: true,
                        isRfid: false,
                        isCompleteData:true,
                        callBack: (code) => {
                           let curItem =  that.state.curItem;
                           curItem.usePersonId = code;
                            that.setState({
                               curItem,
                               modalVisible :true,
                            });
                            that.fetchUsePerson();
                        }
                    });
                } else if (isCameraPresent && DeviceInfo.getDeviceId() === 'rk30sdk') {
                    if (DeviceInfo.getDeviceId() === 'rk30sdk') {
                        this.props.navigation.navigate('QBarCodeScan', {
                            isGoBack: true,
                            isHaveCamera: true,
                            isRfid: true,
                            isCompleteData:true,
                            callBack: (code) => {
                                let curItem =  that.state.curItem;
                                curItem.usePersonId = code;
                                that.setState({
                                    curItem,
                                    modalVisible :true,
                                });
                                that.fetchUsePerson();
                            }
                        });
                    } else {
                        RRCToast.show('设备无摄像头或设备异常，无法启动扫描', 2, 3000);
                        return;
                    }
                } else {
                    if (DeviceInfo.getDeviceId() === 'rk30sdk') {
                        this.props.navigation.navigate('QBarCodeScan', {
                            isGoBack: true,
                            isHaveCamera: false,
                            isRfid: true,
                            isCompleteData:true,
                            callBack: (code) => {
                                let curItem =  that.state.curItem;
                                curItem.usePersonId = code;
                                that.setState({
                                    curItem,
                                    modalVisible :true,
                                });
                                that.fetchUsePerson();
                            }
                        });
                    } else {
                        RRCToast.show('设备无摄像头或设备异常，无法启动扫描', 2, 3000);
                        return;
                    }
                }
            })
            .catch(cameraAccessException => {
                RRCToast.show('设备无摄像头或设备异常，无法启动扫描', 2, 3000);
                return;
            });
    }
   
    openSnScan = () => {
        DeviceInfo.isCameraPresent()
            .then(isCameraPresent => {
                if ((isCameraPresent || Platform.OS == 'ios') && DeviceInfo.getDeviceId() !== 'rk30sdk') {
                    this.props.navigation.navigate('QBarCodeScan', {
                        isGoBack: true,
                        isHaveCamera: true,
                        isRfid: false,
                        callBack: (code) => {
                            let args = {
                                searchNum: code,
                                type:2 // 交付查询
                            }
                            this.fetchAssetData(args);
                        }
                    });
                } else if (isCameraPresent && DeviceInfo.getDeviceId() === 'rk30sdk') {
                    if (DeviceInfo.getDeviceId() === 'rk30sdk') {
                        this.props.navigation.navigate('QBarCodeScan', {
                            isGoBack: true,
                            isHaveCamera: true,
                            isRfid: true,
                            callBack: (code) => {
                                let args = {
                                    searchNum: code,
                                    type:2 // 交付查询
                                }
                                this.fetchAssetData(args);
                            }
                        });
                    } else {
                        RRCToast.show('设备无摄像头或设备异常，无法启动扫描', 2, 3000);
                        return;
                    }
                } else {
                    if (DeviceInfo.getDeviceId() === 'rk30sdk') {
                        this.props.navigation.navigate('QBarCodeScan', {
                            isGoBack: true,
                            isHaveCamera: false,
                            isRfid: true,
                            callBack: (code) => {
                                let args = {
                                    searchNum: code,
                                    type:2 // 交付查询
                                }
                                this.fetchAssetData(args);
                            }
                        });
                    } else {
                        RRCToast.show('设备无摄像头或设备异常，无法启动扫描', 2, 3000);
                        return;
                    }
                }
            })
            .catch(cameraAccessException => {
                RRCToast.show('设备无摄像头或设备异常，无法启动扫描', 2, 3000);
                return;
            });
    }


    fetchAssetData = (args) =>{
        HttpUtil.post('assetData', args)
        .then(result => {
            RRCLoading.hide();
            if (result.httpCode == 200 && 'data' in result) {
                // let selected = [];
                // let selectedShow = [];
                let isIncludes = false;
                this.state.selected.forEach(element => {
                    if(element.assetId==result.data.id_){
                        isIncludes = true;
                    }
                });
                if(!isIncludes){
                    this.setState({
                        curItem:{
                            assetId:result.data.id_,
                            statusName:result.data.statusName,
                            statusShowColor:result.data.statusShowColor,
                            assetName:result.data.assetName ,
                            assetNo:result.data.assetNo,
                            serialNo:result.data.serialNo,
                            rfidNo:result.data.rfidNo,
                            usePersonId:result.data.usePersonId,
                            usePersonNo:result.data.usePersonNo,
                            usePersonName:result.data.usePersonName,
                            usePersonDeptName:result.data.usePersonDeptName,
                            usePersonPhone:result.data.usePersonPhone,
                            useUserId:result.data.useUserId,
                        },
                        modalVisible:true,
                    });
                }else{
                    RRCToast.show('该资产已在交付列表中', 2, 3000);
                }

                // if (!this.state.selected.includes(result.data.id_)) {
                //     this.setState({
                //         curItem:{
                //             assetId:result.data.id_,
                //             statusName:result.data.statusName,
                //             assetName:result.data.assetName ,
                //             assetNo:result.data.assetNo,
                //             serialNo:result.data.serialNo,
                //             rfidNo:result.data.rfidNo,
                //             usePersonId:result.data.usePersonId,
                //             usePersonNo:result.data.usePersonNo,
                //             usePersonName:result.data.usePersonName,
                //             usePersonDeptName:result.data.usePersonDeptName,
                //             usePersonPhone:result.data.usePersonPhone,
                //             useUserId:result.data.useUserId,
                //         },
                //         modalVisible:true,
                //     });
                // }else{
                //     RRCToast.show('该资产已在交付列表中', 2, 3000);
                // }
            } else {
                RRCToast.show('未检索到，可能是以下原因导致：\n\t1、资产未发卡\n\t2、资产非等待交付状态', 2, 5000);
            }
        })
        .catch(error => {
            //console.log(error);
            RRCLoading.hide();
            RRCToast.show('系统异常', 2, 3000);
        })
    }

    remove = (id) => {
        let selected = Array.from(this.state.selected);
        let selectedShow = Array.from(this.state.selectedShow);
        // selected.splice(selected.findIndex(i => i === id), 1);

        selected.forEach((value, index)=>{
            if(id==value.assetId){
                selected.splice(selected.findIndex(value => value.assetId === id ),1)
            }
        });

        selectedShow.forEach((value, index) => {
            if (id == value.assetId) {
                selectedShow.splice(selectedShow.findIndex(value => value.assetId === id), 1)
            }
        });
        this.setState({
            selected: selected,
            selectedShow: selectedShow,
        });
    }

    handleChange = (field) => {
        this.setState(field);
    }

    submit = () => {
        if (this.state.selected.length <= 0) {
            RRCToast.show('请选择要迁移资产', 2, 5000);
            return;
        }
        
        let params = {
            moveReason: 3,
            // assetIdList: this.state.selected,
            assetUserList:this.state.selected,
        }
        //console.log(JSON.stringify(params));
        RRCLoading.setLoadingOptions({
            text: '请稍候',
            loadingBackgroundColor: 'rgba(0,0,0,0.0)',
            loadingViewStyle: { backgroundColor: 'rgba(0,0,0,0.8)' },
            loadingTextStyle: {}
        })
        //console.log(result);
        HttpUtil.post('createMove', params)
            .then(result => {
                if (result.httpCode == 200) {
                    RRCToast.show('保存成功', 2, 5000);
                    RRCLoading.hide();
                    this.setState({
                        selected: [],
                        selectedShow: [],
                        reasonId: '',
                        reasonName: '',
                        curItem:{}
                    });
                } else {
                    RRCLoading.hide();
                    RRCToast.show('系统异常', 1, 5000);
                }
            })
            .catch(error => {
                //console.log(error);
                RRCLoading.hide();
                RRCToast.show('系统异常', 1, 5000);
            })

    }

    showUsePersonModal=(item)=>{
        // console.log("------------------");
        // console.log(item);
        this.setState({
            curItem:item,
            modalVisible:true,
        });
       // console.log(this.state.curItem)
    }

    showToast(msg){
        this.setState({
            modalToastOpacity:3,
            modalToastMsg:msg,
            modalToastShow:'flex',
        });
        if(this.modalToastTimer){
            clearInterval(this.modalToastTimer);
        }
        this.modalToastTimer = window.setInterval(function(){
            that.setState({modalToastOpacity:that.state.modalToastOpacity-0.1});
            if(that.state.modalToastOpacity<=0){
                clearInterval(that.modalToastTimer);
                that.setState({
                    modalToastShow:'none',
                })
            }
        },100);
    }
    fetchUsePerson  = () => {
        if (!this.state.curItem.usePersonId) {
            // RRCToast.show('请输入使用人ID', 2, 5000);
            that.showToast('请输入使用人ID');
            return;
        }
        RRCLoading.setLoadingOptions({
            text: '请稍候',
            loadingBackgroundColor: 'rgba(0,0,0,0.0)',
            loadingViewStyle: { backgroundColor: 'rgba(0,0,0,0.8)' },
            loadingTextStyle: {}
        })
        let params ={
            personId:this.state.curItem.usePersonId,
        }
        HttpUtil.post('getUserListByParams', params)
            .then(result => {
            RRCLoading.hide();
            if (result.httpCode == 200) {
                if(result.data && result.data.length>0){
                    //console.log(result)
                    let item = Object.assign({},this.state.curItem,{
                        usePersonNo:result.data[0].personNo,
                        usePersonName:result.data[0].name,
                        usePersonDeptName:result.data[0].deptName,
                        usePersonPhone:result.data[0].phone,
                        useUserId:result.data[0].id,
                    });
                    this.setState({
                        curItem:item,
                    });
                    //console.log(this.state.curItem);

                }else{
                    that.showToast('未查询到人员信息');
                    // RRCToast.show('未查询到人员信息', 2, 5000);
                    let item = Object.assign({},this.state.curItem,{
                        usePersonNo:'',
                        usePersonName:'',
                        usePersonDeptName:'',
                        usePersonPhone:'',
                        useUserId:'',
                    });
                    this.setState({curItem:item},);
                }
            } else {
                RRCLoading.hide();
                // RRCToast.show('系统异常', 2, 5000);
                that.showToast('系统异常');
            }
        })
        .catch(error => {
            //console.log(error);
            RRCLoading.hide();
            // RRCToast.show('系统异常', 1, 5000);
            that.showToast('系统异常');
        })
    }

    assetBindUsePerson =()=>{
        if (!this.state.curItem.useUserId) {
            // RRCToast.show('请查询使用人', 2, 5000);
            that.showToast('请填写使用人信息');
            return;
        }

        let isIncludes = false;
        this.state.selected.forEach(element => {
            if(element.assetId==this.state.curItem.assetId){
                isIncludes = true;
            }
        });

        if(isIncludes){
            let item = Object.assign({},this.state.curItem,{
                usePersonId:null,
                usePersonNo:null,
                usePersonName:null,
                usePersonDeptName:null,
                usePersonPhone:null,
                useUserId:null,
            });
            this.setState({
                curItem:item,
                modalVisible:false,
            });
        }else{
            let selected = [];
            let selectedShow = [];

            selected.push({
                assetId:this.state.curItem.assetId,
                userId:this.state.curItem.useUserId,
            });

            // 打印
           // this.onPrint(this.state.curItem.useUserId,this.state.curItem.assetId);

            selectedShow.push(this.state.curItem);

            let item = Object.assign({},this.state.curItem,{
                usePersonId:null,
                usePersonNo:null,
                usePersonName:null,
                usePersonDeptName:null,
                usePersonPhone:null,
                useUserId:null,
            });

            this.setState({
                selected: selected.concat(this.state.selected),
                selectedShow: selectedShow.concat(this.state.selectedShow),
                curItem:item,
                modalVisible:false,
            });



        }

        

        // RRCLoading.setLoadingOptions({
        //     text: '请稍候',
        //     loadingBackgroundColor: 'rgba(0,0,0,0.0)',
        //     loadingViewStyle: { backgroundColor: 'rgba(0,0,0,0.8)' },
        //     loadingTextStyle: {}
        // })
        // let params ={
        //     useUserId:this.state.curItem.useUserId,
        //     assetId:this.state.curItem.assetId,
        // }
        // HttpUtil.post('updateUseUserByParams', params)
        //     .then(result => {
        //     RRCLoading.hide();
        //     if (result.httpCode == 200 && result.data && result.data>0) {
        //         // RRCToast.show('保存成功', 2, 3000);
        //         that.showToast('保存成功');
        //         let selected = [];
        //         let selectedShow = [];
        //         if (!this.state.selected.includes(this.state.curItem.assetId)) {
        //             selected.push(this.state.curItem.assetId);
        //             selectedShow.push(this.state.curItem);
        //         }
        //         let item = Object.assign({},this.state.curItem,{
        //             usePersonId:null,
        //             usePersonNo:null,
        //             usePersonName:null,
        //             usePersonDeptName:null,
        //             usePersonPhone:null,
        //             useUserId:null,
        //         });
        //         this.setState({
        //             selected: selected.concat(this.state.selected),
        //             selectedShow: selectedShow.concat(this.state.selectedShow),
        //             curItem:item,
        //             modalVisible:false,
        //         });
        //         console.log(this.state.curItem);
        //     } else {
        //         RRCLoading.hide();
        //         // RRCToast.show('系统异常', 2, 5000);
        //         that.showToast('系统异常');
        //     }
        // })
        // .catch(error => {
        //     //console.log(error);
        //     RRCLoading.hide();
        //     // RRCToast.show('系统异常', 1, 5000);
        //     that.showToast('系统异常');
        // })
    }

    onPrint(userId,assetId){
        let params ={
            useUserId:userId,
            assetId:assetId,
        }
        HttpUtil.post('app/print', params)
            .then(result => {
        })
        .catch(error => {
        });
    }


    infraredReceived(code) {
        if(that.state.modalVisible){
            let curItem =  that.state.curItem;
            curItem.usePersonId = code[0];
            that.setState({
                curItem,
                modalVisible :true,
            });
            that.fetchUsePerson();
        }else{
            let args = {
                searchNum: code[0],
                type:2 // 交付查询
            }
            that.fetchAssetData(args);
        }
    }

    rfidInit() {
        if (DeviceInfo.getDeviceId() === 'rk30sdk') {
            // 红外测试
            //console.log('批量变更页的红外读头状态:'+InfraredModule.getState());
            InfraredModule.init();
            //console.log('批量变更页红外初始化完成')
            this.infraredListener = DeviceEventEmitter.addListener('onInfraredReveice', this.infraredReceived);
        }
    }
    openModal = (item) => {
        this.setState({
            modalVisible: true,

        });
    }
    closeModal=()=> {
        this.setState({
            modalVisible: false,
        });
    }

    onChangeText =(text)=>{
        let item = Object.assign({},this.state.curItem,{
            usePersonId:text,
            usePersonNo:null,
            usePersonName:null,
            usePersonDeptName:null,
            usePersonPhone:null,
            useUserId:null,

        });
        this.setState({
            curItem:item,
        })
    }

    onRequestClose() {
        this.setState({
            modalVisible:false
        });
    }

    render() {

        return (
            <SafeAreaView style={styles.container}>
                <Modal
                    animationType="slide"
                    transparent={true}
                    visible={this.state.modalVisible}
                    onRequestClose={() => {
                        this.onRequestClose();
                    }}
                >
                    <View style={styles.modalLayer}>
                        <View style={{opacity:this.state.modalToastOpacity,zIndex:999999,position:'absolute',left:getScreenWidth()/4,width:getScreenWidth()/2,flexDirection: 'column',justifyContent: 'center'}}>
                            <Text ref="toastmsg" style={{display:this.state.modalToastShow,opacity:0.8,backgroundColor:'#000',color:'#FFF',borderRadius:getPixel(5),fontSize:15,padding:getPixel(15),includeFontPadding: false,textAlignVertical: 'center',textAlign: 'center', }}>{this.state.modalToastMsg}</Text>
                        </View>
                        <View style={[styles.modalContainer, { borderRadius: 20, backgroundColor: '#eeeeee' }]}>
                            <TouchableOpacity onPress={this.closeModal}>
                                <View style={{ padding: 10, justifyContent: 'flex-end', flexDirection: 'row' }}>
                                    <Image source={require('../images/guanbi.png')} style={[DeviceInfo.getDeviceId() === 'rk30sdk' ? {marginTop:15}:null,{marginRight: 5 }]} />
                                </View>
                            </TouchableOpacity>
                            <View style={[styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1), flexDirection: 'row' }]}>
                                <View style={{ flexDirection: 'column' }}>
                                    <View style={{ flexDirection: 'row', marginBottom: 5 }}>
                                        <Text style={[styles.wait, {borderColor:this.state.curItem.statusShowColor,color:this.state.curItem.statusShowColor, width: 80, textAlign: 'center',}]}>{this.state.curItem.statusName}</Text>
                                        <Text style={{ fontSize: 18 }}>{this.state.curItem.assetName}</Text>
                                    </View>
                                </View>
                            </View>
                            <View style={[styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }]}>
                                <Text style={styles.selectLable}>资产编码:</Text>
                                <Text style={styles.selectValue}>{this.state.curItem.assetNo}</Text>
                            </View>
                            <View style={[styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }]}>
                                <Text style={styles.selectLable}>SN:</Text>
                                <Text style={styles.selectValue}>{this.state.curItem.serialNo}</Text>
                            </View>
                            <View style={[styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }]}>
                                <Text style={styles.selectLable}>RFID:</Text>
                                <Text style={styles.selectValue}>{this.state.curItem.rfidNo}</Text>
                            </View>
                            <View style={{ marginTop: getPixel(10) }}>

                                <View style={[styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }]}>
                                    <View style={{width:getScreenWidth()-getPixel(170),flexDirection: 'row',alignItems: 'center'}}>
                                        <Text style={[styles.selectLable,{width:getPixel(60)}]}>人员ID</Text>
                                        <TextInput 
                                            autoFocus={true}
                                            style={{fontSize: getPixel(15),flex:1}}
                                            onChangeText={text =>this.onChangeText(text) }
                                            value={this.state.curItem.usePersonId}
                                            >
                                        </TextInput>
                                    </View>
                                    <TouchableOpacity onPress={this.fetchUsePerson.bind(this)}>
                                        <Text style={{ width:getPixel(80),color: '#FFF', textAlign: 'center', fontSize: getPixel(12), lineHeight: getPixel(30),borderRadius:6,backgroundColor:'#4a69dd',paddingLeft:getPixel(15),paddingRight:getPixel(15),paddingTop:getPixel(0),paddingBottom:getPixel(0) }}>匹配</Text>
                                    </TouchableOpacity>
                                </View>
                                <View style={[styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }]}>
                                    <Text style={styles.selectLable}>员工编号:</Text>
                                        <Text style={styles.selectValue}>{this.state.curItem.usePersonNo}</Text>
                                </View>
                                <View style={[styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }]}>
                                    <Text style={styles.selectLable}>中文名:</Text>
                                    <Text style={styles.selectValue}>{this.state.curItem.usePersonName}</Text>
                                </View>
                                <View style={[styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }]}>
                                    <Text style={styles.selectLable}>员工所在部门:</Text>
                                    <Text style={styles.selectValue}>{this.state.curItem.usePersonDeptName}</Text>
                                </View>
                                <View style={[styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }]}>
                                    <Text style={styles.selectLable}>电话信息:</Text>
                                    <Text style={styles.selectValue}>{this.state.curItem.usePersonPhone}</Text>
                                </View>
                               
                                <View style={styles.buttonGroup2}>
                                    { DeviceInfo.getDeviceId() !== 'rk30sdk' ?
                                    <TouchableOpacity onPress={this.personScan.bind(this)}>
                                        <View style={styles.buttonSearch2}>
                                            <Text style={{ color: '#FFFFFF', textAlign: 'center', fontSize: getPixel(16), lineHeight: getPixel(40) }}>扫描</Text>
                                        </View>
                                    </TouchableOpacity> : null
                                    }
                                     <TouchableOpacity onPress={this.assetBindUsePerson.bind(this)}>
                                        <View style={DeviceInfo.getDeviceId() !== 'rk30sdk' ? styles.buttonSave2 : styles.buttonConfirm}>
                                            <Text style={{ color: '#FFFFFF', textAlign: 'center', fontSize: getPixel(16), lineHeight: getPixel(40) }}>确定</Text>
                                        </View>
                                    </TouchableOpacity> 
                                </View>
                            </View>
                        </View>
                    </View>
                </Modal>
                <NavigationEvents onDidFocus={() => this.rfidInit()} onDidBlur={() => this.componentWillUnmount()} />
                <View style={styles.header}>
                    <View style={{ width: getPixel(55), justifyContent:'center', alignItems:'center'}}>
                        <TouchableOpacity onPress={() => this.back()}>
                            <Image source={ require('../images/back.png')}  style={{ resizeMode: 'contain', width: getPixel(25), height: getPixel(25) }} />
                        </TouchableOpacity>
                    </View>
                    <View style={{ width: getScreenWidth() - getPixel(110), justifyContent: 'center', alignItems: 'center' }}>
                        <Text style={{ fontSize: getPixel(17), color: '#333' }}>资产交付</Text>
                    </View>
                    <View style={{ width: getPixel(55), justifyContent: 'center', alignItems: 'center' }}>
                    </View>
                </View>
                <Text style={{ marginBottom: getPixel(10), backgroundColor: '#FFF', height: getPixel(40), lineHeight: getPixel(40), paddingLeft: getPixel(15), color: '#999', fontSize: getPixel(15) }}>准备交付资产数量: {this.state.selected.length}</Text>
                <FlatList
                    style={{ backgroundColor: '#F5F5F5' }}
                    data={this.state.selectedShow}
                    renderItem={({ item }) => this.renderItem(item)}
                    keyExtractor={(item, index) => index.toString()}
                >
                </FlatList>
                <Formik
                    initialValues={{}}
                    onSubmit={values => this.submit(values)}
                >
                    {({ handleChange, setFieldValue, handleBlur, handleSubmit, values }) => (
                        <View>
                            {/* <View style={ [styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }] }>
                            <Text style={ styles.selectLable }>变更状态</Text>
                            <TouchableOpacity onPress={this.openReasonModal.bind(this)}>
                                <Text style={ styles.selectValue }>{ this.state.reasonName }</Text>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={this.openReasonModal.bind(this)}>
                                <Image style={ styles.selectIcon } source={ require('../images/select.png')}  style={{ resizeMode: 'contain', width: getPixel(25), height: getPixel(25) }} />
                            </TouchableOpacity>
                        </View> */}
                            {/* <View style={ [styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }] }>
                            <Text style={ styles.selectLable }>区域位置</Text>
                            <TouchableOpacity onPress={this.openAreaModal.bind(this)}>
                                <Text style={ styles.selectValue }>{ this.state.areaName }</Text>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={this.openAreaModal.bind(this)}>
                                <Image style={ styles.selectIcon } source={ require('../images/select.png')}  style={{ resizeMode: 'contain', width: getPixel(25), height: getPixel(25) }} />
                            </TouchableOpacity>
                        </View>
                        { this.state.roomType==1?
                        <View style={ [styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }] }>
                            <Text style={ styles.selectLable }>机柜</Text>
                            <TouchableOpacity onPress={this.openRackModal.bind(this)}>
                                <Text style={ styles.selectValue }>{ this.state.rackName }</Text>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={this.openRackModal.bind(this)}>
                                <Image style={ styles.selectIcon } source={ require('../images/select.png')}  style={{ resizeMode: 'contain', width: getPixel(25), height: getPixel(25) }} />
                            </TouchableOpacity>
                        </View>:null
                        }
                        { this.state.roomType==1?
                        <View style={ [styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }] }>
                            <Text style={ styles.inputLable }>起始U位</Text>
                            <TextInput style={ styles.inputValue} placeholder="请输入起始U位" onChangeText={ text => this.handleChange({ startU: text })}  value={ this.state.startU }  />
                        </View>:null
                        }
                        <View style={ [styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }] }>
                            <Text style={ styles.selectLable }>负责部门</Text>
                            <TouchableOpacity onPress={this.openManageBranchModal.bind(this)}>
                                <Text style={ styles.selectValue }>{ this.state.manageBranchName}</Text>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={this.openManageBranchModal.bind(this)}>
                                <Image style={ styles.selectIcon } source={ require('../images/select.png')}  style={{ resizeMode: 'contain', width: getPixel(25), height: getPixel(25) }} />
                            </TouchableOpacity>
                        </View>
                        <View style={ [styles.formGroup, { borderBottomColor: '#EEE', borderBottomWidth: getPixel(1) }] }>
                            <Text style={ styles.selectLable }>负责人</Text>
                            <TouchableOpacity onPress={this.openManageUserModal.bind(this)}>
                                <Text style={ styles.selectValue }>{this.state.manageUserName}</Text>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={this.openManageUserModal.bind(this)}>
                                <Image style={ styles.selectIcon } source={ require('../images/select.png')}  style={{ resizeMode: 'contain', width: getPixel(25), height: getPixel(25) }} />
                            </TouchableOpacity>
                        </View> */}
                        </View>
                    )}
                </Formik>


                <View style={styles.buttonGroup}>
                    {DeviceInfo.getDeviceId() !== 'rk30sdk' ?
                        <TouchableOpacity onPress={this.openSnScan.bind(this)}>
                            <View style={styles.buttonSearch}>
                                <Text style={{ color: '#FFFFFF', textAlign: 'center', fontSize: getPixel(16), lineHeight: getPixel(40) }}>扫描</Text>
                            </View>
                        </TouchableOpacity> : null
                    }
                    <TouchableOpacity onPress={this.submit}>
                        <View style={DeviceInfo.getDeviceId() !== 'rk30sdk' ? styles.buttonSave : styles.buttonSaveAll}>
                            <Text style={{ color: '#FFFFFF', textAlign: 'center', fontSize: getPixel(16), lineHeight: getPixel(40) }}>提交</Text>
                        </View>
                    </TouchableOpacity>
                    {/* <TouchableOpacity onPress={this.openModal.bind(this)}>
                        <View style={DeviceInfo.getDeviceId() !== 'rk30sdk' ? styles.buttonSave : styles.buttonSaveAll}>
                            <Text style={{ color: '#FFFFFF', textAlign: 'center', fontSize: getPixel(16), lineHeight: getPixel(40) }}>测试</Text>
                        </View>
                    </TouchableOpacity> */}
                </View>
                {/* <Reason data={this.state.moveReasonList} isVisible={this.state.showReasonModal} closeModal={this.closeReasonModal} selectNode={this.selectReason} onRequestClose={this.closeReasonModal} /> */}
                {/* <Area data= {this.state.datacenterRoomTree} isVisible = { this.state.showAreaModal } closeModal={ this.closeAreaModal } selectNode={ this.selectArea } />
                <Rack data= {this.state.racks} isVisible = { this.state.showRackModal } closeModal={ this.closeRackModal } selectNode={ this.selectRack } />
                <BranchTree treeData= {this.state.branchList} isVisible = { this.state.showManageBranchModal } closeModal={ this.closeManageBranchModal } selectNode={ this.selectManageBranch }/>
                <UserTree treeData= {this.state.selectUserList} isVisible = { this.state.showManageUserModal } closeModal={ this.closeManageUserModal } selectNode={ this.selectManageUser }/> */}
            </SafeAreaView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5F5F5',
    },
    header: {
        height: getPixel(50),
        elevation: 4,
        shadowOffset: { width: 0, height: 5 },
        shadowOpacity: 0.5,
        shadowRadius: 10,
        shadowColor: '#DDD',
        backgroundColor: '#FFF',
        flexDirection: 'row',
    },
    row: {
        flexDirection: 'row',
        height: getPixel(60),
        backgroundColor: '#FFF',
        alignItems: 'center',
        paddingLeft: getPixel(15),
        marginBottom: getPixel(10),
    },
    name: {
        fontSize: getPixel(16),
        color: '#333',
    },
    rfid: {
        fontSize: getPixel(14),
        color: '#999',
    },
    rowLeft: {
        width: getScreenWidth() - getPixel(70),

    },
    rowRight: {
        width: getPixel(70),
        paddingLeft: getPixel(10),
    },
    buttonGroup: {
        flexDirection: 'row',
        paddingLeft: getPixel(15),
        paddingRight: getPixel(15),
        height: getPixel(60),
        backgroundColor: '#FFF',
        width: getScreenWidth(),
        alignItems: 'center',
        elevation: 4,
        shadowOffset: { width: 0, height: 5 },
        shadowOpacity: 0.5,
        shadowRadius: 10,
        shadowColor: '#DDD',
        backgroundColor: '#FFF',
    },
    buttonSearch: {
        backgroundColor: '#6484FA',
        height: getPixel(40),
        borderTopLeftRadius: getPixel(10),
        borderBottomLeftRadius: getPixel(10),
        width: (getScreenWidth() - 30) / 2,
    },
    
    buttonSave: {
        backgroundColor: '#4a69dd',
        height: getPixel(40),
        borderTopRightRadius: getPixel(10),
        borderBottomRightRadius: getPixel(10),
        width: (getScreenWidth() - 30) / 2,
    },
    buttonGroup2: {
        flexDirection: 'row',
        paddingRight: getPixel(15),
        height: getPixel(60),
        backgroundColor: '#FFF',
       // width: getScreenWidth()-getPixel(94),
        alignItems: 'center',
        elevation: 4,
        shadowOffset: { width: 0, height: 5 },
        shadowOpacity: 0.5,
        shadowRadius: 10,
        shadowColor: '#DDD',
        backgroundColor: '#FFF',
    },
    buttonSearch2: {
        backgroundColor: '#6484FA',
        height: getPixel(40),
        borderTopLeftRadius: getPixel(10),
        borderBottomLeftRadius: getPixel(10),
        width: (getScreenWidth() - 100) / 2,
        marginLeft:getPixel(15),
    },
    buttonSave2: {
        backgroundColor: '#4a69dd',
        height: getPixel(40),
        borderTopRightRadius: getPixel(10),
        borderBottomRightRadius: getPixel(10),
        width: (getScreenWidth() - 85) / 2,
        marginRight:getPixel(15),
    },
    buttonSaveAll: {
        backgroundColor: '#4a69dd',
        height: getPixel(40),
        borderRadius: getPixel(10),
        width: (getScreenWidth() - 30),
    },
    formGroup: {
        flexDirection: 'row',
        alignItems: 'center',
        height: getPixel(50),
        backgroundColor: '#FFF',
        paddingLeft: getPixel(10),
        paddingRight: getPixel(10),
    },
    selectLable: {
        fontSize: getPixel(15),
        width: getPixel(110),
        paddingLeft: getPixel(5),
        color: '#333',
    },
    selectValue: {
        fontSize: getPixel(15),
        width: getScreenWidth() - getPixel(135),
    },
    inputLable: {
        fontSize: getPixel(15),
        width: getPixel(90),
        paddingLeft: getPixel(5),
        color: '#333',
    },
    inputValue: {
        fontSize: getPixel(15),
        width: getScreenWidth() - getPixel(115),
    },
    selectIcon: {
        width: getPixel(25),
        alignItems: 'center',
    },
    modalLayer: {
        backgroundColor: 'rgba(0, 0, 0, 0.85)',
        flex: 1,
        justifyContent: 'center',
        padding: 32
    },
    modalContainer: {
        backgroundColor: 'white',
        justifyContent: 'center',
        paddingBottom: 20
    },
    wait: {
        backgroundColor: 'rgba(255,237,240,1)',
        borderRadius: 12,
        borderWidth: 1,
        borderStyle: 'solid',
        //borderColor: 'rgba(255,92,125,1)',
        //color: '#FF5C7D',
        paddingLeft: 1,
        paddingRight: 1,
        paddingTop:3,
        paddingBottom:3,
        marginRight: 5
    },
    buttonConfirm: {
        backgroundColor: '#4a69dd', 
        height: getPixel(40), 
        borderRadius: getPixel(10),
        width: getScreenWidth()-getPixel(94),
        marginLeft:getPixel(15),
    },
});